<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查询天气</title>
    <style>
        #box{
            margin-top:20px;
            width:500px;
            border: 5px solid rgb(0, 255, 213);
            font-size:18px;
            font-weight: bold;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    请输入城市信息：<input type="text" name="city" id="city" placeholder="请输入城市信息" />
    <button id="query">查询天气</button><br />

    <div id="box" style="display: none; ">结果查询中，请等待....</div>
</body>
</html>


<script src="./jquery.min.js"></script>


<script>
   
    var city = document.getElementById('city');
    var query = document.getElementById('query');
    var box = document.getElementById('box');
    

    query.onclick = function()
    {
   
        var name = city.value.trim()

        
        if(!name)
        {
           
            box.style.display = 'none'

            alert('请输入城市名称')
            return false  
        }

       
        box.style.display = 'block'

        query.setAttribute("disabled", true);

       
        $.ajax({
            url: 'api.php', 
            type: 'post',  
            dataType: 'json', 
            data: {name},
            success: function(success)  
            {
                
                if(!success.result)
                {
                    alert(success.msg)
                    return false
                }

                
                var html = ''

              
                for(var item of success.data.weather)
                {
                    html += `${item.date} ${item.temp} ${item.weather} ${item.wind} <br />`
                }

                box.innerHTML = html

               
                query.removeAttribute("disabled")
            },
            error: function()  
            {
                console.log('接口请求失败')
                return false
            }

        })
    }
</script>